<template>
  <div>
     <el-card>
      
        <ng-table
          :tableData="tableData"
          :columns="columns"
          :pageInfo="pageInfo"
          :total="total"
          @handleCurrent="handleCurrent"
          :type="type"
          @handleSelectionChange="handleSelectionChange"
        >
          <template #status="scope">
            <el-tag
              type="danger"
              effect="plain"
              v-if="scope.row.status == 5 || scope.row.status == 6"
            >
              {{ scope.row.status | status }}</el-tag
            >
            <el-tag type="success" effect="plain" v-else>
              {{ scope.row.status | status }}</el-tag
            >
          </template>

          <template #action="scope">
            <div>
              <el-link type="primary" @click="editClick(scope.row)"
                >修改信息</el-link
              >
              <el-link type="primary" @click="detailsClick(scope.row)"
                >操作轨迹</el-link
              >
            </div>
          </template>
        </ng-table>
 
    </el-card>

    

   

   
  </div>
</template>

<script>

import NgTable from "@/components/NgTable/index";
// import _ from "lodash";
import mixins from "@/components/NgTable/mixins";

export default {
  components: {
    NgTable
  },
  mixins: [mixins],
  data() {
    return {  
      type: "selection",
      columns: [
        { label: "xxx", value: "srcmanno", slot: "" },
        { label: "xxx", value: "bloodcode", slot: "" },
        { label: "xxx", value: "manual_num", slot: "" },
        { label: "xxx", value: "compname", slot: "" },
        { label: "状态", value: "", slot: "status" ,width:'80px'},
        { label: "xxx", value: "bloodtype", slot: "" },
        { label: "xxx", value: "RHD", slot: "" },
        { label: "操作", value: "", slot: "action" }
      ],
    
    };
  },
  mounted() {
    this.getList();
  },
   filters: {
    status(val) {
      switch (val) {
        case "0":
          return "待检";
        case "1":
          return "未用";
        case "2":
          return "预留";
        case "3":
          return "已发";
        case "4":
          return "返还";
        case "5":
          return "报废";
        case "6":
          return "过期";
        default:
          return "正常";
      }
    }
  },
  methods: {
    //需要复选框
    handleSelectionChange(val) {
      //选择行的数据
      console.log('val: ', val);
    },
    editClick(row) {
     //row 为当前行数据
    },
    detailsClick(row) {
     //row 为当前行数据
    },
    getList(){
  //接口获取数据
  //可以直接this.tableData = '你接口返回的数据' this.total = '条数'
 // 表格参数(tableData)以及分页信息(pageInfo,total)在mixins里面,以及分页切换都封装在mixins里，不需要写分页切换方法。
    },
  }
};
</script>

<style lang="scss" scoped>

</style>
